<template>
	<view v-if="show" class="dynamic-publish-toolbar" @touchmove.stop.prevent="() => {}">
		<!-- S 顶部状态条 -->
		<view class="dynamic-publish-toolbar_header">
			<text class="header-text">0 字</text>
			<text class="header-tip">提示：1212</text>
			<image class="header-icon" src="/static/icon-default/icon_mood_out.png" mode="scaleToFill"
				@click="$_click('weather', true)"></image>
			<image class="header-icon" src="/static/icon-default/icon_visible_out.png" mode="scaleToFill"
				@click="$_click('visible', true)"></image>
		</view>
		<!-- E 顶部状态条 -->

		<!-- S 展开空间 -->
		<view class="dynamic-publish-toolbar_body" v-if="visible || weather || audio">
			<!-- S 内容可见限制 -->
			<view class="body-visible" v-if="visible">
				<view class="body-header">
					<view class="body-header-title">内容可见限制</view>
					<view class="body-header-cancel" @click="$_click('visible', false)">关闭</view>
				</view>
				<view class="body-visible_choice">
					<view class="body-visible_item" v-for="visible in visibleChoice" :key="visible.key"
						@click="$_click('visibleSelect', visible.value)">
						<sol-radio :name="visible.value" :value="visibleSelect" color="#484e55" colorChecked="#607d8b"
							:size="36">
						</sol-radio>
						<text class="body-visible_text" v-text="visible.name">名称</text>
					</view>
				</view>
			</view>
			<!-- E 内容可见限制 -->

			<!-- S 心情天气 -->
			<view class="body-weather" v-if="weather">
				<view class="body-header">
					<view class="body-header-title">心情天气</view>
					<view class="body-header-cancel" @click="$_click('weather', false)">关闭</view>
				</view>
				<view class="body-weather_choice">
					<view class="body-weather_item"
						:class="{'body-weather_item-select': weather.value == weatherSelect}"
						v-for="weather in weatherChoice" :key="weather.key"
						@click="$_click('weatherSelect', weather.value)">
						<image class="body-weather_icon" :src="`/static/icon-dynamic/icon_weather-${weather.key}.png`"
							mode="scaleToFill"></image>
						<text class="body-weather_text" v-text="weather.name">名称</text>
					</view>
				</view>
			</view>
			<!-- E 心情天气 -->

			<!-- S 音频 -->
			<view class="body-audio" v-if="audio">
				<view class="body-header">
					<view class="body-header-title">分享音频片段</view>
					<view class="body-header-cancel" @click="$_click('audio', false)">关闭</view>
				</view>
				<view class="body-audio_choice">
					<view class="body-audio_info">
						<image class="body-audio_info-icon" src="/static/icon-default/icon_audio_sound.png"
							mode="scaleToFill"></image>
						<text class="body-audio_info-text">06′′</text>
					</view>
					<view class="body-audio_btns">
						<view class="body-audio_btns-primary">从文件中选取</view>
						<view class="body-audio_btns-confirm">确认</view>
					</view>
				</view>
			</view>
			<!-- E 音频 -->
		</view>
		<!-- E 展开空间 -->

		<!-- S 底部工具条 -->
		<view class="dynamic-publish-toolbar_footer">
			<image class="footer-icon" src="/static/icon-default/icon_bold_out.png" mode="scaleToFill"></image>
			<image class="footer-icon" src="/static/icon-default/icon_bold_out.png" mode="scaleToFill"></image>
			<image class="footer-middle" src="/static/icon-default/icon_audio_out.png" mode="scaleToFill"
				@click="$_click('audio', true)"></image>
			<image class="footer-icon" src="/static/icon-default/icon_picture.png" mode="scaleToFill"></image>
			<image class="footer-icon" src="/static/icon-default/icon_expression_out.png" mode="scaleToFill"></image>
		</view>
		<!-- E 底部工具条 -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	/**  
	 * 动态发布工具栏
	 * @property {Object} info 卡片信息  
	 * @event {Function} click 点击事件  
	 */
	export default {
		name: "dynamic-publish-toolbar",
		props: {
			// 显示与否
			show: {
				type: Boolean,
				default: true
			},
			// 可见限制选择列表
			visibleChoice: {
				type: [Array, Object],
				default: () => {
					return [{
							name: "所有人",
							key: "visible_all",
							value: "2",
						},
						{
							name: "仅粉丝",
							key: "visible_fans",
							value: "1",
						},
						{
							name: "不可见",
							key: "visible_none",
							value: "0",
						}
					]
				}
			},
			// 心情天气选择列表
			weatherChoice: {
				type: [Array, Object],
				default: () => {
					return [{
							name: "晴天愉快",
							key: "sunny",
							value: "1",
						},
						{
							name: "阴天失落",
							key: "cloudy",
							value: "2",
						},
						{
							name: "雨天伤感",
							key: "rainy",
							value: "3",
						},
						{
							name: "雾天迷茫",
							key: "fog",
							value: "4",
						},
						{
							name: "日落平凡",
							key: "sunset",
							value: "5",
						},
						{
							name: "夜晚宁静",
							key: "night",
							value: "6",
						},
					]
				}
			},
		},
		data() {
			return {
				// 可见限制展示
				visible: false,
				// 可见限制选择
				visibleSelect: '2',
				// 心情天气展示
				weather: false,
				// 心情天气选择
				weatherSelect: '2',
				// 音频展示
				audio: false,
				// 音频选择
				audioSelect: '2',
			}
		},
		computed: {},
		methods: {
			// 内部点击事件
			$_click(type = '', value = 0) {
				console.log(this.$options.name, type, value);
				switch (type) {
					case 'visible':
						this.visible = value;
						this.weather = false;
						this.audio = false;
						break;
					case 'weather':
						this.visible = false;
						this.weather = value;
						this.audio = false;
						break;
					case 'audio':
						this.visible = false;
						this.weather = false;
						this.audio = value;
						break;
					case 'weatherSelect':
					case 'visibleSelect':
						this[type] = value;
						break;
					case 'cancel':
						this.visible = false;
						break;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.dynamic-publish-toolbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: auto;
		height: auto;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		background-color: #484e55;
		z-index: 150;

		&_header {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding: 32rpx;

			.header {
				&-text {
					font-size: 28rpx;
					font-weight: 400;
					color: #DDDDDD;
					background-color: #576069;
					padding: 6rpx 28rpx;
					border-radius: 28rpx;
					margin-right: 32rpx;
				}

				&-tip {
					font-size: 24rpx;
					font-weight: 400;
					color: #d1d3d4;
					flex-grow: 1;
					width: 268rpx;
				}

				&-icon {
					width: 48rpx;
					height: 48rpx;
					padding: 12rpx;
					margin-left: 32rpx;
				}
			}
		}

		&_footer {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			padding: 28rpx;

			.footer {
				&-icon {
					width: 52rpx;
					height: 52rpx;
					padding: 12rpx;
				}

				&-middle {
					width: 180rpx;
					height: 90rpx;
				}
			}
		}

		&_body {
			padding: 28rpx;
			background-color: #2c2d31;
			transition: all .3s;

			.body {

				// 标题和取消
				&-header {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 28rpx;

					&-title {
						font-size: 42rpx;
						letter-spacing: 4rpx;
						font-weight: bold;
						color: #DDDDDD;
					}

					&-cancel {
						font-size: 32rpx;
						letter-spacing: 4rpx;
						font-weight: 400;
						color: #DDDDDD;
					}
				}

				// 可见内容限制
				&-visible {
					&_choice {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;
					}

					&_item {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;
						padding: 28rpx 28rpx 28rpx 0;
						margin-right: 42rpx;
					}

					&_text {
						font-size: 28rpx;
						letter-spacing: 4rpx;
						font-weight: 400;
						color: #DDDDDD;
						margin-left: 18rpx;
					}
				}

				// 心情天气
				&-weather {
					&_choice {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						align-items: center;
						justify-content: space-between;
					}

					&_item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						flex-basis: 172rpx;
						padding: 24rpx;
						background-color: #2c2d31;
						border-radius: 12rpx;
						margin-top: 24rpx;

						&-select {
							background: #484e55;
							transition: all .15s;
						}
					}

					&_icon {
						width: 48rpx;
						height: 48rpx;
					}

					&_text {
						font-size: 28rpx;
						letter-spacing: 4rpx;
						font-weight: 400;
						color: #DDDDDD;
						margin-top: 18rpx;
					}
				}

				// 音频
				&-audio {
					&_choice {
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						justify-content: flex-start;
					}

					&_info {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;
						align-self: center;
						padding: 36rpx 0;

						&-icon {
							width: 256rpx;
							height: 64rpx;
						}

						&-text {
							font-size: 36rpx;
							letter-spacing: 4rpx;
							font-weight: 400;
							color: #DDDDDD;
							margin-top: 28rpx;
						}
					}

					&_btns {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;

						&-primary {
							border-radius: 50rpx;
							font-size: 32rpx;
							font-weight: 400;
							letter-spacing: 4rpx;
							border: 2rpx #474e54 solid;
							background-color: #607d8b;
							color: #DDDDDD;
							padding: 20rpx 32rpx;
						}

						&-confirm {
							border-radius: 50rpx;
							font-size: 32rpx;
							font-weight: 400;
							letter-spacing: 4rpx;
							border: 2rpx #576069 solid;
							background-color: #576069;
							color: #DDDDDD;
							padding: 20rpx 32rpx;
							margin-left: 80rpx;
						}
					}


				}
			}
		}
	}
</style>
